<template>
  <div class="main">
    <div class="m-header">
      <el-button
        size="mini"
        type="primary"
        @click="addClassify()">
        新增
      </el-button>
    </div>
    <el-table
      :data="classifyList"
      style="width: 100%"
      class="m-table"
      >
      <el-table-column
        prop="name"
        label="分类名称">
      </el-table-column>
      <el-table-column
        label="显示状态">
        <template slot-scope="scope">
          <span v-if="scope.row.isShow">显示</span>
          <span v-else style="color:red">隐藏</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editClassify(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="showClassify(scope.$index, scope.row)"
            v-if="!scope.row.isShow"
            >
            显示
          </el-button>
          <el-button
            size="mini"
            type="info"
            @click="hideClassify(scope.$index, scope.row)"
            v-if="scope.row.isShow"
            >
            隐藏
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteClassify(scope.$index, scope.row)">
            删除
          </el-button>
          
      </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      共{{classifyList.length}}个分类，其中{{canShowClassifyNums}}个显示，{{ classifyList.length - canShowClassifyNums}}个隐藏。
    </div>
  </div>
</template>
<script>
import { getAllClassify,hideClassifyApi,showClassifyApi,deleteClassifyApi} from '@/api/classify'
export default {
  data(){
    return {
      classifyList:[]
    }
  },
  mounted(){
    this.init()
  },
  computed:{
    canShowClassifyNums(){
      return this.classifyList.filter(item=>{return item.isShow ===1}).length
    }
  },
  methods:{
    init(){
      getAllClassify().then(res=>{
        if(res.code === 0){
          this.classifyList = res.data
        }else{
          this.$message.error('获取所有分类失败')
        }
      })
    },
    addClassify(index,row){
      // 新增分类
      this.$router.push('/classify/addClassify')
      
    },
    editClassify(index,row){
      this.$router.push('/classify/addClassify/?classifyId=' + row.id)
    },
    deleteClassify(index,row){

      deleteClassifyApi({id:row.id}).then(res=>{
        if(res.code === 0){
            this.init()
            this.$message.success('删除分类成功')
          }else{
            this.$message.error('删除分类失败')
          }
      })
    },
    showClassify(index,row){
      // 显示分类
      this.$confirm('确认要显示该分类吗？')
      .then(()=> {
        showClassifyApi({id:row.id,isShow:1}).then(res=>{
          if(res.code === 0){
            this.init()
            this.$message.success('显示分类成功')
          }else{
            this.$message.error('显示分类失败')
          }
        })
        done();
      })
      .catch(_ => {});
    },
    hideClassify(index,row){
      // 隐藏分类
      this.$confirm('确认要隐藏该分类吗？')
      .then(()=> {
        hideClassifyApi({id:row.id,isShow:0}).then(res=>{
          if(res.code === 0){
            this.init()
            this.$message.success('隐藏分类成功')
          }else{
            this.$message.error('隐藏分类失败')
          }
        })
        done();
      })
      .catch(_ => {});
    }
  }
}
</script>
<style lang="scss" scoped>
.main{
  padding:20px;
  .m-header{
    border-bottom: 1px solid #e8e8e8;
    padding:10px;
    display: flex;
    justify-content: flex-end;
    .el-button{
    }
  }
  .footer{
    margin-top:10px;
    padding:20px;
    text-align: right;
  }
}
</style>

